<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--    导入BootStrap的css文件-->
    <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap3/css/bootoast.css">
    <!--    导入jquery-->
    <script src="bootstrap3/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!--    导入bootstrap中的js文件-->
    <script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap3/js/bootoast.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function () {
            getTypes(1);

            //初始化删除模态框
            $('#delModal').on("show.bs.modal",function (event){
                var button = $(event.relatedTarget);//获得按钮
                var typeId = button.data('type-id');//获得按钮上的参数
                var modal = $(this);
                modal.find('.modal-body #delTypeId').val(typeId);
            })
            $('#btnDel').click(function (){
                $.ajax({
                    url: 'drop_type',
                    type: 'post',
                    cache: false,
                    data: {id: $('#delTypeId').val()},
                    dataType: 'json',
                    success: function (rst) {
                                if (rst.code==1){
                                    //删除数据
                                    bootoast({
                                        message: rst.msg,
                                        type: 'success',
                                        position: 'top',
                                        timeout: 2
                                    });
                                    $('#delModal').modal('hide');
                                    getTypes(1);
                                }else {
                                //删除失败
                                    bootoast({
                                        message: rst.msg,
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                }
                    }
                });
            });
            //初始化修改模块
            $('#delModal2').on("show.bs.modal",function (event){
                var button = $(event.relatedTarget);//获得按钮
                var typeId = button.data('type-id');//获得按钮上的参数
                var typeName = button.data('type-name');//获得按钮上的参数
                var typeDepict = button.data('type-depict');//获得按钮上的参数
                var modal = $(this);
                modal.find('.modal-body #typeId').val(typeId);
                modal.find('.modal-body #typeName').val(typeName);
                modal.find('.modal-body #desc').val(typeDepict);
            });
            $('#btnDel2').click(function () {
                if ($('#typeName').val() == '') {
                    bootoast({
                        message: '类型不能为空',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                }else {
                    //正确  修改
                    $.ajax({
                        url: 'edit_type',
                        type: 'post',
                        cache: false,
                        data: {
                            typeId:$('#typeId').val(),
                            typeName:$('#typeName').val(),
                            typeDepict:$('#desc').val()
                        },
                        dataType: 'json',
                        success: function (rst) {
                            if (rst.code==1){
                                //删除数据
                                bootoast({
                                    message: rst.msg,
                                    type: 'success',
                                    position: 'top',
                                    timeout: 2
                                });
                                $('#delModal2').modal('hide');
                                getTypes(1);
                            }else {
                                //删除失败
                                bootoast({
                                    message: rst.msg,
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            }
                        }
                    });
                }

            });

        });

        //读取所有数据,显示到表格
        function getTypes(pn) {
            $.ajax({
                url: 'find_type_page',
                type: 'get',
                cache: false,
                data: {pageNow: pn},
                dataType: 'json',
                success: function (rst) {
                    if (rst.code == 1) {
                        $('table tbody').empty();//清空
                        $('.pagination').empty();//清空分页
                        //判断有没有数据
                        if (rst.data.types != null && rst.data.types.length > 0) {
                            //有数据
                            for (let i = 0; i < rst.data.types.length; i++) {
                                //一个类型
                                var t = rst.data.types[i];
                                $(` <tr>
                                    <td>${t.typeId}</td>
                                    <td>${t.typeName}</td>
                                    <td>${t.typeDepict == null ? '' : t.typeDepict}</td>
                                    <td class="text-center">
                                    <input type="button" data-type-id="${t.typeId}" data-type-name="${t.typeName}" data-type-depict="${t.typeDepict}" class="btn btn-default btn-sm" data-toggle="modal" data-target="#delModal2" value="编辑">
                                    <input type="button" data-toggle="modal" data-type-id="${t.typeId}" data-target="#delModal" class="btn btn-danger btn-sm" value="删除">
                                    </td>
                                    </tr>`).appendTo('table tbody');
                            }
                            //处理分页
                            $(`<li><a href="javascript:getTypes(${rst.data.page.pageNow - 1})">&laquo;</a></li>`).appendTo('.pagination');
                            for (let i = 1; i <= rst.data.page.pageCount; i++) {
                                if (i == rst.data.page.pageNow) {
                                    $(`<li class="active"><a href="javascript:getTypes(${i})"> ${i}</ a></li>`).appendTo('.pagination');
                                } else {
                                    $(`<li><a href="javascript:getTypes(${i})">${i}</a></li>`).appendTo('.pagination');
                                }
                            }
                            $(`<li><a href="javascript:getTypes(${rst.data.page.pageNow + 1})">&raquo;</a></li>`).appendTo('.pagination');
                        } else {
                            //没数据
                            $(`<tr>
                                    <td colspan="4" class="text-center text-danger">未查询到数据</td>
                                </tr>`).appendTo('table tbody');
                        }
                    }
                }
            });
        };

    </script>
    <style>
        table th {
            text-align: center;
            font-size: 15px;
        }

        .pagination {
            margin-top: 5px;
        }
    </style>

</head>

<body>
<div class="container-fluid">
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="922welcome.html">首页</a></li>
            <li><a href="#">狗熊岭图书</a></li>
            <li>管理图书类型</li>
        </ul>
        <div class="col-sm-10 col-sm-offset-1 t">
            <table class="table table-bordered table-hover">
                <thead>
                <tr class="bg-primary">
                    <th style="width: 10%">编号</th>
                    <th style="width: 20%">图书类型</th>
                    <th>图书描述</th>
                    <th style="width: 20%">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-center">1</td>
                    <td>哲学类</td>
                    <td>哲学是最简单的数学逻辑,而你不会</td>
                    <td class="text-center">
                        <input type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#delModal2"
                               value="编辑">
                        <input type="button" data-toggle="modal" data-target="#delModal" class="btn btn-danger btn-sm"
                               value="删除">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="row text-center">
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
<!--  删除模态框-->
<div class="modal fade" id="delModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="border-left: 5px">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除该数据吗?
                <input id="delTypeId" type="hidden">
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger btn-sm" id="btnDel">确定
                </button>
                <button class="btn btn-default btn-sm" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>
<!--  修改模态框-->
<div class="modal fade" id="delModal2">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="border-left: 5px">修改图书类型</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <!--            垂直表单-->
                            <form class="text-center">
                                <div class="form-group text-left">
                                    <label for="typeId">图书编号:</label>
                                    <input type="text" id="typeId" readonly class="form-control">
                                </div>
                                <div class="form-group text-left">
                                    <label for="typeName">图书类型:</label>
                                    <input type="text" id="typeName" class="form-control">
                                </div>
                                <div class="form-group text-left">
                                    <label for="desc">详细描述:</label><br>
                                    <textarea id="desc" class="form-control"></textarea>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" id="btnDel2">修改
                </button>
                <button class="btn btn-default btn-sm" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>